import React, { useEffect, useState } from 'react';
import axios from "axios";
import { useParams } from 'umi';
import {message, Button,Card} from 'antd';
import './DictionaryDetails.css';
import {history} from "@@/core/history";
interface Dictionary {
    id: number;
    ZH: string;
    UY: string;
    EN: string;
}
const DictionaryDetails: React.FC = () => {
    const [dictionary, setDictionary] = useState<Dictionary | null>(null);
    const [isLoading, setIsLoading] = useState(true);
    const token = localStorage.getItem('token');
    const { id } = useParams();


    // 提取axios请求为独立函数
    const fetchDictionaryData = async () => {
        try {
            const response = await axios.get(`/api/dictionary/${id}`, {
                headers: {
                    Authorization: `Bearer ${token}`,
                },
            });

            setDictionary(response.data);
            setIsLoading(false);
        } catch (err) {
            setIsLoading(false);
            message.error('获取词典详情失败，请稍后再试。');

        }
    };
    useEffect(() => {
        fetchDictionaryData();
    }, [id]);
    const handleGoBack = () => {
        history.back();
    };

    const columns = [
        {
            title: 'ZH',
            dataIndex: 'ZH',
            key: 'ZH',
        },
        {
            title: 'EN',
            dataIndex: 'EN',
            key: 'EN',
        },
        {
            title: 'UY',
            dataIndex: 'UY',
            key: 'UY',
        },

    ];
    return (
        <div>
            {isLoading && <p>正在加载词典详情...</p>}
            {!isLoading && dictionary && (
                <div>

                    <Card title={dictionary.UY} bordered={false} className="card">
                        <p className="word-ZH">中文:  {dictionary.UY}</p>
                        <p className="word-UY">ئۇيغۇرچە  :{dictionary.ZH}</p>
                        <p className="word-EN"> English:  {dictionary.EN}</p>
                    </Card>
                    <Button onClick={handleGoBack} className="go-back-button" type="primary">返回</Button>
                </div>
            )}
            {!isLoading && !dictionary && <p>未找到对应的词典详情，请检查输入的ID是否正确。</p>}
        </div>
    );
};

export default DictionaryDetails;